<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>实名认证</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<link rel="stylesheet" type="text/css" href="../css/attestation.css" />
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/base.js"></script>
	</head>

	<body>
		<div class="mui-col-xs-12 hidden">
			<div class="cert-success">
				<canvas class="Dashboard" id="canvas" width="370" height="370" data-score='350'></canvas>
			</div>
		</div>
		<div class="cert-btn">
			<p class="mui-text-center">认证成功</p>
			<p id='msg' class="mui-text-center none">恭喜您获得免押金租房资</p>
			<button id='timer' onclick="sendInfoToJava();" class="verify-form-btn show">继续预定(5s)</button>
		</div>
		<script type="text/javascript">
			function saveCanvas(score) {
				var canvas = document.getElementById('canvas'),
					ctx = canvas.getContext('2d'),
					cWidth = canvas.width,
					cHeight = canvas.height,
					//score = canvas.attributes['data-score'].value,
					stage = ['', '', '', '', '', ''],
					radius = 150,
					deg0 = Math.PI / 9,
					deg1 = Math.PI * 10 / 49;

				if(score < 350 || score > 950) {
					alert('信用分数区间：350~950');
				} else {
					var dot = new Dot(),
						dotSpeed = 0.03,
						textSpeed = Math.round(dotSpeed * 100 / deg1),
						angle = 0,
						credit = 350;

					(function drawFrame() {

						ctx.save();
						ctx.clearRect(0, 0, cWidth, cHeight);
						ctx.translate(cWidth / 2, cHeight / 2);
						ctx.rotate(8 * deg0);

						dot.x = radius * Math.cos(angle);
						dot.y = radius * Math.sin(angle);

						var aim = (score - 350) * deg1 / 100;
						if(angle < aim) {
							angle += dotSpeed;
						}
						dot.draw(ctx);

						if(credit < score - textSpeed) {
							credit += textSpeed;
						} else if(credit >= score - textSpeed && credit < score) {
							credit += 1;
						}
						text(credit);

						ctx.save();
						ctx.beginPath();
						ctx.lineWidth = 3;
						ctx.strokeStyle = 'rgba(255, 255, 255, .5)';
						ctx.arc(0, 0, radius, 0, angle, false);
						ctx.stroke();
						ctx.restore();

						window.requestAnimationFrame(drawFrame);

						ctx.save(); //中间刻度层
						ctx.beginPath();
						ctx.strokeStyle = 'rgba(255, 255, 255, .2)';
						ctx.lineWidth = 10;
						ctx.arc(0, 0, 135, 0, 11 * deg0, false);
						ctx.stroke();
						ctx.restore();

						ctx.save(); // 刻度线
						for(var i = 0; i < 7; i++) {
							ctx.beginPath();
							ctx.lineWidth = 2;
							ctx.strokeStyle = 'rgba(255, 255, 255, .3)';
							ctx.moveTo(140, 0);
							ctx.lineTo(130, 0);
							ctx.stroke();
							ctx.rotate(deg1);
						}
						ctx.restore();

						ctx.save(); // 细分刻度线
						for(i = 0; i < 30; i++) {
							if(i % 5 !== 0) {
								ctx.beginPath();
								ctx.lineWidth = 2;
								ctx.strokeStyle = 'rgba(255, 255, 255, .1)';
								ctx.moveTo(140, 0);
								ctx.lineTo(133, 0);
								ctx.stroke();
							}
							ctx.rotate(deg1 / 5);
						}
						ctx.restore();

						ctx.save(); //信用分数
						ctx.rotate(Math.PI / 2);
						for(i = 0; i < 7; i++) {
							ctx.fillStyle = 'rgba(255, 255, 255, .4)';
							ctx.font = '10px Microsoft yahei';
							ctx.textAlign = 'center';
							ctx.fillText(350 + 100 * i, 0, -115);
							ctx.rotate(deg1);
						}
						ctx.restore();

						ctx.save(); //分数段
						ctx.rotate(Math.PI / 2 + deg0);
						for(i = 0; i < 6; i++) {
							ctx.fillStyle = 'rgba(255, 255, 255, .4)';
							ctx.font = '10px Microsoft yahei';
							ctx.textAlign = 'center';
							ctx.fillText(stage[i], 5, -115);
							ctx.rotate(deg1);
						}
						ctx.restore();

						ctx.save(); //信用阶段及评估时间文字
						ctx.rotate(10 * deg0);
						ctx.fillStyle = '#fff';
						ctx.font = '28px Microsoft yahei';
						ctx.textAlign = 'center';
						if(score < 500) {
							ctx.fillText('信用较差', 0,50);
						} else if(score < 600 && score >= 500) {
							ctx.fillText('信用一般', 0, 50);
						} else if(score < 650 && score >= 600) {
							ctx.fillText('信用良好', 0, 50);
						} else if(score < 700 && score >= 650) {
							ctx.fillText('信用优秀', 0, 50);
						} else if(score <= 950 && score >= 700) {
							ctx.fillText('信用极好', 0, 50);
						}

//						ctx.fillStyle = 'rgba(255,255,255,0.3)';
//						ctx.font = '14px/50px Microsoft yahei';
//						ctx.fillText('评估时间：2016.11.06', 0, 80);

						ctx.fillStyle = '#7ec5f9';
						ctx.font = '14px Microsoft yahei';
						ctx.fillText('BETA', 0, -60);
						ctx.restore();

						// ctx.save(); //最外层轨道
						ctx.beginPath();
						ctx.strokeStyle = 'rgba(255, 255, 255, .4)';
						ctx.lineWidth = 3;
						ctx.arc(0, 0, radius, 0, 11 * deg0, false);
						ctx.stroke();
						ctx.restore();

					})();
				}

				function Dot() {
					this.x = 0;
					this.y = 0;
					this.draw = function(ctx) {
						ctx.save();
						ctx.beginPath();
						ctx.fillStyle = 'rgba(255, 255, 255, .7)';
						ctx.arc(this.x, this.y, 3, 0, Math.PI * 2, false);
						ctx.fill();
						ctx.restore();
					};
				}

				function text(process) {
					ctx.save();
					ctx.rotate(10 * deg0);
					ctx.fillStyle = '#ffffff';
					ctx.font = '80px Microsoft yahei';
					ctx.textAlign = 'center';
					ctx.textBaseLine = 'top';
					ctx.fillText(process, 0, 10);
					ctx.restore();
				}
			};
		</script>
		<script>
			var loc_type; 
			var loc_house_id;
			var returnOrder;
			var ctnBtn = '';// 倒计时按钮文字
			var sec = 5;	// 倒计时 5s
			function sendJSData(type,house_id) {
				console.log(8);
				loc_type = type; 
				loc_house_id = house_id; 
				if(loc_type == 1){
					ctnBtn = "继续预定";
				} else {
					ctnBtn = "免押租房";
				}
				$('#timer').html(ctnBtn + '('+sec+'s)');
				
				resetTime(sec);
            }
			 // 发送消息到Android客户端
            function sendInfoToJava() {
                //调用android程序中的方法，并传递参数            
                window.AndroidWebView.showInfoFromJs(loc_type,loc_house_id);
            }
			var context = getUrlParam('biz_content');
			//console.log(context);
			$.ajax({
				type: "post",
				url: wanqi_api.success,
				dataType: "json",
				data: {"biz_content": context},
				success: function(data) {
					/* 模拟数据 
					data.state = 1;
					data.status = 1;
					data.msg = '';
					data.result = '600';
					data.errorCode = '0';*/
					/* 模拟数据 end */
					if(data.state == 1){
						saveCanvas(data.result);
						showMsg(data.result);
					} else {
						//显示data.msg
						alert(data.msg)
					}
					
						//saveCanvas(701);
						//showMsg(701);
					//console.log(data);
					//saveCanvas(853)
					//$('#canvas').attr('data-score',certificationSuccess  );
				}
			});
			/* score >= 700 显示 */
			function showMsg(score){
				var msg = "";
				if(score >= 700){
					document.getElementById('msg').style.display = '';
					$('#msg').removeClass('none');
				}else{
					document.getElementById('msg').style.display = 'none';
				}
			}
			/* 倒计时 */
			function resetTime(time){
				var timer=null;
				var t=time;
				var s=t;
				function countDown(){
					s--;
					s<10&&(s=''+s);
					if(s.length>=2){
						clearInterval(timer);
					}else{
						if(s == 0){
							$('#timer').click('');
							$('#timer').html(ctnBtn);
							clearInterval(timer);
						}else{
							$('#timer').html(ctnBtn + "("+s+"s)");
						}
					}
					
				}
				timer=setInterval(countDown,1000);
			}
			/* 倒计时 end */
		</script>
	</body>

</html>